<html>
    <head>
        <title>nhao</title>
    </head>
    <body>
    <div class="login-background" id="login-background">
        PLEASE LOGIN IN WIETH YOUR NAME TOKEN
        <div class="login-box">
            <form>
                <div class="title">
                    <label><font size="4">请输入登录信息</font></label>
                </div>
                <div class="username">
                    <label for="userName"><img src="" alt=""></label>
                    <input id="userName" name="userName" type="text" autocomplete="off" maxlength="12" placeholder="请输入用户名" required>
                    <label ><img src="" alt=""></label>
                </div>
                <div class="password">
                    <label ><img src="" alt=""></label>
                    <!--                设置两个相同的input，防止浏览器记住密码-->
                    <input type="password" name="userPwd" style=""/>
                    <input id="userPwd" name="userPwd" type="text" autocomplete="off" maxlength="10" placeholder="请输入密码" required>
                    <label ><img src="" alt=""></label>
                </div>
                <input type="button" value="提交" onclick="doSubmit()"> <!--提交之后可以使用$.submit -->
            </form>
        </div>
    </div>

    <script src="/securityDemo/js/JQuery.js"></script>
    <script type="text/javascript">
        //获取表单的请求
        // $("form").submit(function () {
            // //构造请求体
            // let formObj = {};
            // //响应的JSON数组
            // let formArray = $("form").serializeArray(); //序列化表单元素（类似 .serialize () 方法 ），返回 JSON 数据结构数据。. 注意： 此方法返回的是 JSON 对象而非 JSON 字符串
            // $.each(formArray,function (i,item) {
            //     formObj[item.name] = item.value;
            // });
            // //使用AJAX，创建POST请求,访问8888/article
            // $.ajax({
            //     type: 'POST',
            //     url: "/article",
            //     data: JSON.stringify(formObj), //将一个 JavaScript 对象或值转换为 JSON 字符串；JSON字符串，不是JSON对象
            //     contentType: 'application/json',
            //     success: function () {
            //         alert(data);
            //     }
            // })
        // })

        doSubmit =  function() {
            if(!$("#userName").val() || !$("#userPwd").val()) {
                alert("不能为空");
                return false;
            }
            $.post("/securityDemo/common/login",{"userName":$("#userName").val(),"userPwd":$("#userPwd").val()},
                function(response) {
                    console.info(response);
                    if(response && response.errorMsg) {
                        alert(response.errorMsg);
                        return false;
                    } else {
                        alert("登录成功");
                        location.href = "main.html";
                    }
                }
            )
        }
    </script>
    </body>
</html>


